<template>
    <div class="c-signature">
       <canvas :width="width" :height="height"></canvas>
    </div>
</template>
<script>
    import SignaturePad from 'signature_pad';
    export default {
        name:'signaturepad',
        props: {
          width: {
            type: String,
            default: "485",
          },
          height: {
            type: String,
            default:"600"
          }
        },
        data() {
            return {}
        },
        methods: {
          clear(){
            this.signaturePad.clear();
          },
          savePng(){
            return this.signaturePad.toDataURL()
          }
        },
        components: {},
        beforeCreate: function () {

        },
        created: function () {

        },
        beforeMount: function () {

        },
        mounted: function () {
          let canvas = this.$el.querySelector('canvas');
          this.signaturePad = new SignaturePad(canvas);
        },
        beforeUpdate: function () {

        },
        updated: function () {

        },
        beforeDestroy: function () {

        },
        destroyed: function () {

        }
    }
</script>

<style lang="less">
  .c-signature{
    min-height: 600px;
    min-width: 485px;
  }
</style>
